<style scoped></style>

<template>
    <div>
        <Modal
            title="修改新闻类别"
            :value="value"
            @on-ok="save"
            @on-visible-change="visibleChange"
            width="800"
            :mask-closable="false"
        >
            <Form ref="cateForm" label-position="top" :rules="cateRule" :model="newsCategory">
                <FormItem label="类别名称" prop="name">
                    <Input v-model="newsCategory.name"></Input>
                </FormItem>
                <FormItem label="类别图片" prop="imageUrl">
                    <SinglePicture :height="60" :width="80" v-model="newsCategory.imageUrl" :requestData="{pictureType : 'ArticleImage'}"></SinglePicture>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('OK')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import NewsCategory from "@/store/entities/articles/NewsCategory";
import Ajax from "@/lib/ajax";
import SinglePicture from '../../../components/single-picture.vue';
@Component({
    components: {SinglePicture}
})
export default class  extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;
    @Prop({ type: Object }) editNewsCategory;
    newsCategory: NewsCategory = new NewsCategory();
    async save() {
        console.log(JSON.stringify(this.newsCategory));
        (this.$refs.cateForm as any).validate(async (valid: boolean) => {
            if (valid) {
                await Ajax.put('/api/services/app/NewsCategory/Update',this.newsCategory);
                (this.$refs.cateForm as any).resetFields();

                this.$emit("save-success");
                this.$emit("input", false);
            }
        });
    }
    cancel() {
        (this.$refs.cateForm as any).resetFields();
        this.$emit("input", false);
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        } else {
            this.newsCategory = Util.extend(true, {}, this.editNewsCategory);
        }
    }
    cateRule = {
        name: [
            {
                required: true,
                message: this.L("FieldIsRequired", undefined, "类别名称"),
                trigger: "blur"
            },
            {
                type: 'string',
                max: 256,
                message: this.L("NoMoreThenLength",undefined,"类别名称","256"),
                trigger: "blur"
            }
        ],
        imageUrl: [
            // {
            //     required: true,
            //     message: '请上传类别图片',
            //     trigger: "change"
            // }
        ]
    };
}
</script>